<template>
    <div>
        <el-table
                :data="usrlist"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    type="index"
                    label="#"
            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    v-model="namelist">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="primary" round @click="handleClick(scope.row)"
                               :disabled="disabledCheck(scope.row)" v-model="title">{{title}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <hr>
    </div>

</template>

<script>
    import axios from 'axios';
    import hunru from '@/mixin';

    export default {
        name: 'Element',
        data() {
            return {
                usrlist: [],
                namelist: [],
                username: '',
                title: '添加好友'
            }
        },
        methods: {
            handleClick(row) {
                axios.post('http://127.0.0.1:8000/api/friends/', {
                        'users_a': this.username,
                        'users_b': row.username,
                        'is_requested': true
                    }, {
                        headers: {
                            token: sessionStorage.getItem('token')
                        }
                    },
                ).then(res => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('已经申请');
                    }
                })
            },
            disabledCheck(row) {
                if (this.lists != null) {
                    let users = this.lists.map(item => item.name);
                    if (row.username === this.username || users.includes(row.username)) {
                        return true; // 禁用按钮
                    } else {
                        return false; // 启用按钮
                    }
                } else {
                    if (row.username === this.username) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        created() {
            axios
                .get('http://127.0.0.1:8000/api/userinform/', {
                    headers: {
                        token: sessionStorage.getItem('token')
                    }
                })
                .then(response => {
                    this.usrlist = response.data.results;
                    this.$emit('myevent', this.usrlist)
                    this.username = sessionStorage.getItem('username')
                })
                .catch(error => {
                    console.log(error);
                });
            if (typeof this.$options.created === 'function') {
                this.$options.created.call(this);
            }
        },
        mixins: [hunru],

    }
</script>